<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="视频标题" prop="title">
				<el-input
					v-model="queryParams.title"
					placeholder="请输入视频标题"
					clearable
					size="small"
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item label="视频分类" prop="classify">
				<el-select v-model="queryParams.classify" placeholder="请选择视频分类" clearable size="small">
					<el-option
						v-for="(item, index) in videoClassifyOption"
						:key="index"
						:label="item.dictLabel"
						:value="item.dictValue">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="作者" prop="author">
				<el-input
					v-model="queryParams.author"
					placeholder="请输入作者"
					clearable
					size="small"
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item label="视频状态" prop="status">
				<el-select v-model="queryParams.status" placeholder="请选择视频状态" clearable size="small">
					<el-option label="待审核" :value="0"/>
					<el-option label="已公开" :value="1"/>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					type="primary"
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
				>新增
				</el-button>
			</el-col>
<!--			<el-col :span="1.5">
				<el-button
					type="success"
					icon="el-icon-edit"
					size="mini"
					:disabled="single"
					@click="handleUpdate"
				>修改
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="danger"
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDelete"
				>删除
				</el-button>
			</el-col>-->
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

<!--		<el-table v-loading="loading" :data="videoList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center"/>
			<el-table-column type="index" :index="indexMethod" label="序号" align="center"/>
			<el-table-column label="视频标题" align="center" prop="title"/>
			<el-table-column label="作者" align="center" prop="author"/>
			<el-table-column label="封面" align="center">
				<template slot-scope="scope">
					<el-image class="image" :src="ossUrl + scope.row.thumbnail" :preview-src-list="[ossUrl + scope.row.thumbnail]"></el-image>
				</template>
			</el-table-column>
			<el-table-column label="视频" align="center">
				<template slot-scope="scope">
					<i class="el-icon-video-play" @click="videoPlayer(scope.row.videoUrl)"></i>
				</template>
			</el-table-column>
			<el-table-column label="播放量" align="center" prop="pageView"/>
			<el-table-column label="转发量" align="center" prop="repost"/>
			<el-table-column label="视频类型" align="center">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.type == 1" type="warning">转载</el-tag>
					<el-tag v-else type="danger">原创</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="视频状态" align="center">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.status == 1" type="success">已公开</el-tag>
					<el-tag v-else>待审核</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
					>修改
					</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
					>删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>-->
		<el-empty description="暂无视频" v-if="videoList.length === 0"></el-empty>
		<el-row :gutter="20" v-else>
			<el-col :span="6" v-for="item in videoList" :key="item.videoId" style="margin-bottom: 20px;">
				<el-card class="cardPos" :body-style="{ padding: '0px' }">
					<div class="videoImageBox" @click="videoPlayer(item.videoUrl)">
						<img :src="ossUrl + item.thumbnail" class="videoImage"  alt=""/>
						<div class="videoPlay">
							<i class="el-icon-video-play" style="color:#efefef;font-size:30px"></i>
						</div>
					</div>
					<div style="padding: 14px;">
						<span>{{ item.title }}</span>
						<div class="bottom clearfix">
							<span class="author">作者：{{ item.author }}</span>
							<span style="float: right;" @click.stop>
								<el-switch v-model="item.status===0" active-color="#ff4949"
										   @change="(value) => handleSwitchChange(item, value)" inactive-color="#13ce66"></el-switch>
							</span>
						</div>
						<div class="bottom clearfix">
							<time class="time">{{ item.createTime }}</time>
							<el-dropdown>
								<span class="el-dropdown-link">
									<el-button class="button" size="mini" type="text" icon="el-icon-more"></el-button>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item @click.native="handleUpdate(item)" icon="el-icon-edit">修改</el-dropdown-item>
									<el-dropdown-item @click.native="handleDelete(item)" icon="el-icon-delete">删除</el-dropdown-item>
									<el-dropdown-item @click.native="handleDownload(item)" icon="el-icon-download">下载</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
<!--							<el-button class="button" size="mini" type="text" icon="el-icon-edit"
									   @click.stop="handleUpdate(item)" style="margin-left: 10px;"></el-button>
							<el-button class="button" size="mini" type="text" icon="el-icon-delete"
									   @click.stop="handleDelete(item)"></el-button>-->
						</div>
					</div>
					<div class="examine" :class="item.status == 0 ? 'red' : 'green'">
						<div class="state">{{ item.status == 0 ? '待审核' : '已审核'}}</div>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<pagination
			v-show="total>0"
			:total="total"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getList"
		/>

		<!-- 添加或修改视频对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="视频标题" prop="title">
					<el-input v-model="form.title" placeholder="请输入视频标题"/>
				</el-form-item>
				<el-form-item label="视频分类" prop="classify">
					<el-select v-model="form.classify" placeholder="请选择视频分类">
						<el-option
							v-for="(item, index) in videoClassifyOption"
							:key="index"
							:label="item.dictLabel"
							:value="item.dictValue">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="视频封面" prop="thumbnail">
					<el-upload
						class="video_uploader"
						:action="upload.url"
						:headers="upload.headers"
						:show-file-list="false"
						:on-success="handleImageSuccess"
						:before-upload="beforeImageUpload">
						<img v-if="form.thumbnail" :src="ossUrl + form.thumbnail" class="avatar" alt="">
						<i v-else class="el-icon-plus video_uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="上传视频" prop="videoUrl">
					<el-upload
						class="video_uploader"
						:action="upload.url"
						:headers="upload.headers"
						:show-file-list="false"
						:on-success="handleVideoSuccess"
						:before-upload="beforeVideoUpload">
						<video ref="video" v-if="form.videoUrl" :src="ossUrl + form.videoUrl" controls="controls" class="video"></video>
						<i v-else class="el-icon-plus video_uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="视频状态">
					<el-switch v-model="form.status" :active-value="1" :inactive-value="0" active-text="已公开" inactive-text="待审核"></el-switch>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog title="视频播放" :visible.sync="videoVisible" width="70%" append-to-body :destroy-on-close="true">
			<video :src="ossUrl + videoUrl" controls="controls" class="videoPlayer"></video>
		</el-dialog>
	</div>
</template>

<script>
import {listVideo, getVideo, delVideo, addVideo, updateVideo, exportVideo} from "@/api/hospital/video";
import {getToken} from "@/utils/auth";

const OSS = require("ali-oss");
const client = new OSS({
	region: 'oss-cn-beijing',
	accessKeyId: 'LTAI4GJBXeDYFrA5MYK752xh',
	accessKeySecret: '8yKOOnjTweki3oIskUVgpHkZWsJ1AD',
	bucket: 'ycgm-wechat-new'
});

export default {
	name: "Video",
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 视频表格数据
			videoList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 20,
				title: null,
				classify: null,
				author: null,
				status: undefined
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
				classify: [{ required: true, message: "视频分类不能为空", trigger: "change" }],
				thumbnail: [{ required: true, message: "请上传封面", trigger: "change" }],
				videoUrl: [{ required: true, message: "请上传视频", trigger: "change" }]
			},
			upload: {
				// 是否禁用上传
				isUploading: false,
				// 设置上传的请求头部
				headers: {Authorization: "Bearer " + getToken()},
				// 上传的地址
				url: process.env.VUE_APP_BASE_API + "/uploadOssFile",
			},
			ossUrl: this.$ossUrl,
			uploadLoading: undefined,
			videoVisible: false,
			videoUrl: undefined,
			examine:1,
			videoClassifyOption: []
		};
	},
	created() {
		this.getDicts('video_classify').then(res => {
			this.videoClassifyOption = res.data;
		})
		this.getList();
	},
	methods: {
		/** 查询视频列表 */
		getList() {
			this.loading = true;
			listVideo(this.queryParams).then(response => {
				this.videoList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				videoId: null,
				title: null,
				classify: null,
				author: null,
				thumbnail: null,
				videoUrl: null,
				pageView: 0,
				repost: 0,
				status: 0,
				type: 0,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null
			};
			this.resetForm("form");
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.videoId)
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = "添加视频";
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const videoId = row.videoId || this.ids
			getVideo(videoId).then(response => {
				this.form = response.data;
				this.open = true;
				this.title = "修改视频";
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					this.form.author = '逸创胜美';
					this.form.type = 2;
					if (this.form.videoId != null) {
						updateVideo(this.form).then(response => {
							if (response.code === 200) {
								this.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							}
						});
					} else {
						addVideo(this.form).then(response => {
							if (response.code === 200) {
								this.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							}
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const videoIds = row.videoId || this.ids;
			this.$confirm('是否确认删除视频编号为"' + videoIds + '"的数据项?', "警告", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(function () {
				return delVideo(videoIds);
			}).then(() => {
				this.getList();
				this.msgSuccess("删除成功");
			}).catch(function () {
			});
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有视频数据项?', "警告", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(function () {
				return exportVideo(queryParams);
			}).then(response => {
				this.download(response.msg);
			}).catch(function () {
			});
		},
		handleVideoSuccess(res) {
			this.form.videoUrl = res.fileName;
			if(this.uploadLoading) {
				this.uploadLoading.close();
			}
		},
		beforeVideoUpload(file) {
			let videoTypes = ["video/mp4", "video/wmv", "video/avi", "video/rmvb", "video/mkv"];
			if(!videoTypes.includes(file.type)) {
				this.msgInfo('上传视频只能是 mp4/wmv/avi/rmvb/mkv 格式!');
				return false;
			}
			this.uploadLoading = this.$loading({
				lock: true,
				text: '加载中'
			});
			return true;
		},
		videoPlayer(videoUrl) {
			console.log(123)
			this.videoUrl = videoUrl;
			this.videoVisible = true;
		},
		handleSwitchChange(item, value) {
			console.log(item, value)
			this.$confirm('此操作将修改视频状态, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let params = { videoId: item.videoId, status: 0 }
				params.status = value ? 0: 1;
				updateVideo(params).then(res => {
					if (res.code === 200) {
						this.msgSuccess("修改成功");
						this.getList();
					}
				})
			})
		},
		handleImageSuccess(res) {
			this.form.thumbnail = res.fileName;
			if(this.uploadLoading) {
				this.uploadLoading.close();
			}
		},
		beforeImageUpload(file) {
			let videoTypes = ["image/bmp", "image/gif", "image/jpg", "image/jpeg", "image/png"];
			if(!videoTypes.includes(file.type)) {
				this.msgInfo('上传视频只能是 bmp/gif/jpg/jpeg/png 格式!');
				return false;
			}
			this.uploadLoading = this.$loading({
				lock: true,
				text: '加载中'
			});
			return true;
		},
		indexMethod(index) {
			return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1;
		},
		handleDownload(row) {
			let extension = row.videoUrl.substring(row.videoUrl.lastIndexOf('.'));
			let url = client.signatureUrl(row.videoUrl, {
				response: {
					"content-disposition": `attachment; filename=${row.title + extension}`
				}
			});
			let a = document.createElement('a')
			a.href = url;
			a.click();
			a.remove();
		}
	}
};
</script>

<style scoped>
.video_uploader ::v-deep.el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.video_uploader ::v-deep.el-upload:hover {
	border-color: #409EFF;
}

::v-deep .el-dropdown{
	float: right;
	margin-right: 5px;
}

.video_uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.video {
	width: 178px;
	height: 178px;
	display: block;
}
.el-icon-video-play {
	font-size: 20px;
	cursor: pointer;
}
.el-icon-video-play:hover {
	color: #409EFF;
}
.videoPlayer {
	height: 350px;
	width: 100%;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.image {
	width: 100px;
	height: 50px;
}

.time {
	font-size: 13px;
	color: #999;
}

.bottom {
	line-height: 28px;
	height: 28px;
}

.button {
	float: right;
}
.videoImageBox{
	width: 100%;
	height: 120px;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}
.videoImage {
	width: 100%;
	height: 100%;
	display: block;
}
.videoPlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.3);
	z-index: 99;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: "";
}

.clearfix:after {
	clear: both
}

.author {
	width: 15px;
	font-size: 13px;
	color: #999;
}
.cardPos{position: relative;}
.examine{width: 0px;height: 0px;border-right: 60px solid transparent;position: absolute;top: 0;left: 0;}
.state{width: max-content;color: #fff;font-size: 15px; transform: rotate(-45deg) translateY(-31px) translateX(32px);position: absolute;left: -2px;top: -1px;}
.red{border-top: 60px solid #e95151;}
.green{border-top: 60px solid #2dd5a9;}

</style>
